<template>
    <div class="app-container">
        <el-row style="margin-bottom:20px;">
            <el-col :span="24" :xs="24">
                <el-form :model="queryParams"  ref="queryForm" :inline="true"  label-width="90px">
                    <my-form :form='queryParams' :options="queryParamsForm" style="float:left;"></my-form>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click='handleQuery(queryParams)' size="mini" >搜索</el-button>
                        <el-button icon="el-icon-refresh" @click='resetQuery()' size="mini">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        
        <el-row style="margin-bottom:20px;">
            <el-button @click="parentUserIdHandler" type="primary">归属辅导关系</el-button>
            <el-button @click="referralParentUserIdHandler" type="primary">邀请关系</el-button>
        </el-row>
        <el-row>
            <el-tree :data='list' :props='defaultProps' @node-click="handleNodeClick"></el-tree>
        </el-row>
        <pagination  v-show="total>0"  :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize" @pagination="getFttusersList"  /> 
    </div>
</template>
<script>
import myForm from '@/views/components/myForm'
import Table from '@/views/components/myTable'
import { getFttusers, } from '@/api/ka/ka'
export default {
    components:{
        myForm,
        Table
    },
    data() {
        return{
            loading:false,
            queryParamsForm:[
                {title:'手机号',key:'cellphone',type:'text',styleWidth:'240px'},
                
            ],
            queryParams:{
                pageNo: 1,
                pageSize: 10,
            },
            list:[],
            total:0,
            defaultProps:{
                children:'children',
                label:'label'
            },
            connectionFlag:'parentUserId',
            
        }
    },
    created(){
        this.getFttusersList()
    },
    methods:{
        //归属辅导关系
        parentUserIdHandler(){
            this.connectionFlag = 'parentUserId'
            this.getFttusersList()
        },
        //邀请关系
        referralParentUserIdHandler(){
            this.connectionFlag = 'referralParentUserId'
            this.getFttusersList()
        },
        //角色选择
        roleLevelHandler(item){
            if(item.roleLevel == '2-0') {
                return '会员(2-0)'
            }
            if(item.roleLevel == '2-1741') {
                return '经理(2-1741)'
            }
            if(item.roleLevel == '2-1742'){
                return '经销商(2-1742)'
            }
        },
        //开卡状态选择
        cardzStateHandler(item){
            if(item.cardzState == 'pending'){
                return '等待开卡'
            }
            if(item.cardzState == 'failed'){
                return '开卡失败'
            }
            if(item.cardzState == 'success'){
                return '开卡成功'
            }
        },
        //点击切换
        handleNodeClick(row){
            let str = row.label.substring(row.label.lastIndexOf('用户ID：')+5)
            let arr = []
            row.children = []
            let data = {}
            if(this.connectionFlag == 'parentUserId'){
                data.parentUserId = str
            }else if(this.connectionFlag == 'referralParentUserId'){
                data.referralParentUserId = str
            }
            
            getFttusers(data).then(res=>{
                arr = res.data.rows
                arr.forEach(item=>{
                    item.roleLevelName = this.roleLevelHandler(item)
                    item.cardzStateName = this.cardzStateHandler(item)
                    
                    let childrenStr = `id：${item.id},手机号：${item.cellphone},角色：${item.roleLevelName}, 网体级别：${item.fttLevel},邀请人ID：${item.referralParentUserId},邀请码：${item.referralCode},
                        归属辅导员ID：${item.parentUserId},中军卡：${item.cardzCellphone},卡状态：${item.cardzStateName},
                        用户ID：${item.userId}`
                    row.children.push({label:childrenStr,children:[{}]})
                    this.$forceUpdate()
                })
            })
        },
        //初始化数据
        getFttusersList(){
            let newArr = []
            this.list = []
            let data = this.addDateRange(this.queryParams)
            getFttusers(data).then(res=>{
                if(res.data.code == 200){
                    newArr =res.data.rows
                    newArr.forEach(item=>{
                        item.roleLevelName = this.roleLevelHandler(item)
                        item.cardzStateName = this.cardzStateHandler(item)
                        let str = `id：${item.id},手机号：${item.cellphone},角色：${item.roleLevelName}, 网体级别：${item.fttLevel},邀请人ID：${item.referralParentUserId},邀请码：${item.referralCode},
                        归属辅导员ID：${item.parentUserId},中军卡：${item.cardzCellphone},卡状态：${item.cardzStateName},
                        用户ID：${item.userId}`
                        this.list.push({label:str,children:[{}]})
                    })
                    this.total = res.data.total
                }
            })
            
        },

        //搜索
        handleQuery(obj){
            this.searchDelVal(obj)
            this.queryParams.pageNo = 1;
            this.getFttusersList()
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
            this.searchReset()
        },
        //清空搜索条件
        searchReset(){
            this.queryParams = {
                pageNo: 1,
                pageSize: 10,
                mobile:'',
            }
        },
        
    }
}
</script>
<style scoped>
.selectBtn {
    background:#1890ff;
    color:#fff;
}
</style>
